<template>
  <p-modal
    title="异常处理人分配（主管）"
    :width="width"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    :wrapClassName="'ycclModal'"
    @cancel="handleCancel"
  >
    <p-spin :spinning="confirmLoading">
      <p-form-model
        ref="ruleForm"
        :model="form"
        :rules="rules"
      >
      <info-list label-width="190">
        <info-list-item label="工序工单号：">
          {{data.processNum || ''}}
        </info-list-item>
        <info-list-item label="异常类型：">
          {{data.exceptionType || ''}}
        </info-list-item>
        <info-list-item label="异常产线(二级工序)：">
          {{data.exceptionSecondProcess || ''}}
        </info-list-item>
        <info-list-item label="线体：">
          {{data.lineName || ''}}
        </info-list-item>
        <info-list-item label="工站：">
          {{data.exceptionWorkstation || ''}}
        </info-list-item>
        <info-list-item label="异常发起人：">
          {{data.exceptionCreateUser || ''}}
        </info-list-item>
        <info-list-item label="异常发起时间：">
          {{data.exceptionCreateTime || ''}}
        </info-list-item>
        <info-list-item label="异常描述：">
          {{data.exceptionDesc || ''}}
        </info-list-item>
      </info-list>
      <!-- <p-form-model-item label="工序工单号" prop="gxgdbh">
        <p-input
          placeholder="请输入内容"
          disabled
          v-model="form.gxgdbh"
        />
      </p-form-model-item>
      <p-form-model-item label="异常产线(二级工序)" prop="yccxerjgx">
        <p-input
          placeholder="请输入内容"
          disabled
          v-model="form.yccxerjgx"
        />
      </p-form-model-item>
      <p-form-model-item label="线体" prop="ycxt">
        <p-input
          placeholder="请输入内容"
          disabled
          v-model="form.ycxt"
        />
      </p-form-model-item>
      <p-form-model-item label="工站" prop="ycgz">
        <p-input
          placeholder="请输入内容"
          disabled
          v-model="form.ycgz"
        />
      </p-form-model-item>
      <p-form-model-item label="异常描述" prop="ycms">
        <p-input
          placeholder="请输入内容"
          disabled
          v-model="form.ycms"
        />
      </p-form-model-item>
      <p-form-model-item label="异常发起人" prop="ycfqr">
        <p-input
          placeholder="请输入内容"
          disabled
          v-model="form.ycfqr"
        />
      </p-form-model-item>
      <p-form-model-item label="异常发起时间" prop="ycfqsj">
        <p-input
          placeholder="请输入内容"
          disabled
          v-model="form.ycfqsj"
        />
      </p-form-model-item> -->
      <p-form-model-item style="margin-top:10px;" label="指定处理人" prop="zdclr">
        <p-select
          show-search
          :value="form.zdclr"
          placeholder="Select a person"
          style="width: 210px"
          :default-active-first-option="false"
          :show-arrow="false"
          :filter-option="false"
          :not-found-content="null"
          @search="handleSearch"
          @change="handleChange"
        >
          <p-select-option v-for="d in handlerList" :key="d.uid">
            {{ d.name }}
          </p-select-option>
        </p-select>
      </p-form-model-item>
    </p-form-model>
    </p-spin>
  </p-modal>
</template>

<script>
import _ from "lodash";
// import mesPeProcess from "@/api/mesPeProcess";
import productUnusual from "@/api/productUnusual";

export default {
  name: "ycclModal",
  props: {
    data: Object,
    value: {
      type: Boolean,
      default: false
    },
  },
  data() {
    return {
      handle: '',
      width: 500,
      visible: false,
      fetching: false,
      handlerList: [],
      confirmLoading: false,
      form: {
        gxgdbh: '', // 工序工单号
        yccxerjgx: '', // 异常产线(二级工序)
        ycxt: '', // 线体
        ycgz: '', // 工站
        ycms: '',
        ycfqr: '',
        ycfqsj: '',
        zdclr: '',
        zdclrName: '',
      },
      rules: {
        gxgdbh: [
          { required: true, message: '请输内容', trigger: 'blur' },
        ],
        yccxerjgx: [
          { required: true, message: '请输内容', trigger: 'blur' },
        ],
        ycxt: [
          { required: true, message: '请输内容', trigger: 'blur' },
        ],
        ycgz: [
          { required: true, message: '请输内容', trigger: 'blur' },
        ],
        ycms: [
          { required: true, message: '请输内容', trigger: 'blur' },
        ],
        ycfqr: [
          { required: true, message: '请输内容', trigger: 'blur' },
        ],
        ycfqsj: [
          { required: true, message: '请输内容', trigger: 'blur' },
        ],
        zdclr: [
          { required: true, message: '请输内容', trigger: 'change' },
        ],
      },
    };
  },
  watch: {
    value() {
      this.initValue()
    },
    visible(val) {
      if (!val) {
        this.$emit('input', val)
      }
    }
  },
  created() {
  },
  mounted() {
    this.initValue();
  },
  methods: {
    /* validateQuantity(rule, value, callback){
      if (value === '' || value === null) {
        callback(new Error('请输入内容'));
      } else if (!(/^[1-9]\d*$/.test(value))) {
        callback(new Error("只能输入正整数"));
      } else {
        callback();
      } 
    }, */
    getSecStaff(value){
      this.fetching = true;
      if (value.trim() === ''){
        this.handlerList = [];
        return;
      }
      productUnusual.getSecStaff({
        keyword: value,
        limit: 1000,
        pageNo: 1,
      }).then( res =>{
        if (res.code === 0){
          const curData = res.data || [];
          this.handlerList = res.data.records;
        }
      })
    },
    handleSearch(value){
      this.getSecStaff(value);
    },
    handleChange(value){
      this.form.zdclr = value; 
      this.getSecStaff(value);
    },
    initValue() {
      this.visible = this.value
    },
    handleOk(){
      const that = this;
      console.log(this.form.zdclr);
      that.$refs.ruleForm.validate(valid => {
        if (valid) {
          productUnusual.mfProductExceptionNoProduct({
            ...this.data,
            exceptionHandleUser: this.form.zdclr
          }).then( res =>{
            if (res.code === 0){
              this.$message.success('分配成功');
              this.visible = false;
              this.$parent.$parent.searchQuery();
            }
          })
        }
      });
    },
    handleCancel(){
      this.visible = false;
      this.$refs.ruleForm.resetFields();
    },
  },
};
</script>

<style lang="less">
  .ycclModal {
    .poros-form .poros-form-item{
      display: flex;
    }
    .poros-form{
      color: rgba(0, 0, 0, 0.85);
    }
    .poros-form-item-label{
      width: 133px;
    }
    .poros-form-item .poros-form-item-control-wrapper{
      overflow: hidden;
    }
    .gt-info-list-item{
      .label{
        text-align: right;
      }
    }
  }
</style>

